<template>
  <page-header-wrapper :title="false">
    <a-card
      :loading="loading"
    >
      <a-tabs type="card" @change="onTabs">
        <a-tab-pane v-for="(item, index) in tabs" :key="index" :tab="item"></a-tab-pane>
      </a-tabs>
      <div class="table-page-search-wrapper">
        <a-form-model :model="queryParam" layout="inline">
          <a-row :gutter="15">
            <a-col :md="4" :sm="24">
              <a-form-model-item>
                <a-input v-model="queryParam['filter[contract_no]']" placeholder="输入合同编号"/>
              </a-form-model-item>
            </a-col>
            <a-col :md="8">
              <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
            </a-col>
          </a-row>
        </a-form-model>
      </div>
      <div class="contract_content">
        <s-table
          bordered
          ref="table"
          :row-key="(record) => record.refund_id"
          :columns="refundColumns"
          :data="refundData"
        >
          <div
            slot="filterDropdown"
            slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
            style="padding: 8px"
          >
            <a-input
              v-ant-ref="c => (searchInput = c)"
              :placeholder="`搜索${column.title}`"
              :value="selectedKeys[0]"
              style="width: 188px; margin-bottom: 8px; display: block;"
              @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
              @pressEnter="() => handleSearch(selectedKeys, confirm, column.dataIndex)"
            />
            <a-button
              type="primary"
              icon="search"
              size="small"
              style="width: 90px; margin-right: 8px"
              @click="() => handleSearch(selectedKeys, confirm, column.dataIndex)"
            >
              搜索
            </a-button>
            <a-button size="small" style="width: 90px" @click="() => handleReset(clearFilters)">
              重置
            </a-button>
          </div>
          <template slot="apply_file_url_map" slot-scope="text, record">
            {{ record.apply_file_name }} <a-icon :style="{ color: '#40a9ff', fontSize: '18px' }" type="download" @click="downFile(record.apply_file_url, record.apply_file_name)"></a-icon>
          </template>
          <template slot="communicate_img" slot-scope="text">
            <a :href="text" target="_blank"><img :src="text" width="40"></a>
          </template>
          <template slot="status" slot-scope="text">
            <a-tag>{{ status[text] }}</a-tag>
          </template>
          <template slot="action" slot-scope="text, record">
            <a @click="toDetail(record.refund_id)">编辑</a>
            <a-divider type="vertical" />
            <a @click="toDetail(record.refund_id)">查看</a>
            <a-divider type="vertical" />
            <a-popconfirm
              title="是否删除"
              ok-text="确定"
              cancel-text="取消"
              @confirm="onDel(record.contract_id, record.refund_id)"
            >
              <a>删除</a>
            </a-popconfirm>
          </template>
        </s-table>
      </div>
    </a-card>
  </page-header-wrapper>
</template>

<script>
  import { STable } from '@/components'
  import { delRefund, refundList } from '@/api/contract'
  import apis from '@/api'
  import col from '@/columns/contract'
  const refundColumns = col.refund
  export default {
    components: {
      STable
    },
    name: 'RefundList',
    data () {
      return {
        refundColumns,
        refundData: parameters => {
          return refundList(Object.assign(parameters, this.queryParam)).then(res => {
            return res.result
          })
        },
        queryParam: {},
        tabs: {},
        status: {},
        advanced: false,
        loading: true
      }
    },
    created () {
      this.getInit()
    },
    methods: {
      getInit () {
        refundList().then(res => {
          if (res.status === 0) {
            this.tabs = res.result.tab_opts
            this.status = res.result.status_opts
            this.loading = false
          }
        })
      },
      toggleAdvanced () {
        this.advanced = !this.advanced
      },
      onTabs (key) {
        this.queryParam['filter[tab]'] = key
        this.$refs.table.refresh(true)
      },
      toDetail (id) {
        this.$router.push({ name: 'RefundDetail', params: { rid: id } })
      },
      handleSearch (selectedKeys, confirm, dataIndex) {
        confirm()
        this.searchText = selectedKeys[0]
        this.searchedColumn = dataIndex
      },
      handleReset (clearFilters) {
        clearFilters()
      },
      onDel (cid, rid) {
        delRefund(cid, rid).then(res => {
          if (res.status === 0) {
            this.$refs.table.refresh(true)
          }
        })
      },
      downFile (value, filename) {
        window.open(apis.Download + '?value=' + value + '&filename=' + filename)
      }
    }
  }
</script>

<style scoped>

</style>
